<template>
  <a-config-provider :theme="{ token: { colorPrimary: '#be9038', borderRadius: `6px` } }">
    <div class="gap-8 bg-gray-100 p-8">
      <a-row>
        <a-col span="16">
          <div class="p-4">
            <a-card v-for="(category, index) in 汉字分类" :key="index" class="mb-6 shadow-md rounded-lg bg-white border border-gray-200">
              <template #title>
                <div class="pl-6">{{ category.title }}</div>
              </template>
              <a-carousel dot-position="bottom" dotsClass="dot-class">
                <div v-for="item in category.characters" :key="item">
                  <a-row :gutter="16" class="p-6 pb-12">
                    <a-col :span="2" v-for="(character, charIndex) in item" :key="charIndex">
                      <a-tag
                        class="block bg-gray-50 text-gray-700 p-2 rounded-md mb-2 hover:bg-gray-100 transition duration-200 text-center"
                      >
                        <div class="py-1 overflow-clip" :title="character[1]">{{ character[1] }}</div>
                        <div class="text-2xl pb-2">{{ character[0] }}</div>
                      </a-tag>
                    </a-col>
                  </a-row>
                </div>
              </a-carousel>
            </a-card>
            <a-card class="shadow-md rounded-lg bg-white border border-gray-200">
              <template #title>
                <div class="pl-6">什么是字典？</div>
              </template>
              <p class="text-gray-700 leading-relaxed p-6">
                字典是为单字提供音韵、意思解释、例句、用法等等的工具书。字典是中国独有的，西方是没有字典的概念，字典主要以收字为主。<br />
                我国最早的字典是在公元30年 -
                124年，汉朝许慎编写的《说文解字》，创立了六书理论，制定了文字学部首的基础，是字书中的佼佼者。（说文解字为字书，而非字典）<br />
                “字典”一词始用于《康熙字典》。根据《说文解字》，典是五帝的书，神圣尊重的大册。<br />
                中文是表意文字，传统上字书排列方式是按照部首（如《康熙字典》），韵书按照韵部分类（如《广韵》）。部首在许慎创立时，共有540个，后来不断简化调整。《康熙》中的部首只剩下214个了。到了《汉语大字典》共有200个。在1925年之后，部分中文字典开始使用由王云五发明的四角号码检字法。<br />
                我国发行量最大的字典是《新华字典》，《新华字典》是中国最具有影响力的现代汉语字典，已成为我国乃至全球华语学习汉语的必备工具书。
              </p>
            </a-card>
          </div>
        </a-col>
        <a-col span="8">
          <div class="p-4">
            <a-card class="mb-6 shadow-md rounded-lg bg-white border border-gray-200">
              <template #title>
                <div class="pl-6"><span class="corner-tag mr-1">┏</span>汉字大全</div>
              </template>
              <div class="p-6">
                <div class="flex flex-wrap">
                  <a-button
                    type="primary"
                    class="text-yellow-600 bg-yellow-50 border-yellow-600 transition duration-200 mr-2 mb-2"
                    v-for="(navItem, itemIndex) in 汉字大全导航"
                    :key="itemIndex"
                  >
                    {{ navItem }}
                  </a-button>
                </div>
              </div>
            </a-card>
            <a-card class="mb-6 shadow-md rounded-lg bg-white border border-gray-200">
              <div class="pl-6 text-lg font-bold pt-4"><span class="corner-tag mr-1">┏</span>拼音查字</div>
              <div class="p-6">
                <a-row :gutter="8">
                  <a-col :span="3" v-for="(letter, letterIndex) in 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'" :key="letterIndex" class="mt-2">
                    <a-button class="text-yellow-600 border-yellow-600 transition duration-200 size-10">
                      {{ letter }}
                    </a-button>
                  </a-col>
                </a-row>
              </div>
              <div class="pl-6 text-lg font-bold pt-4"><span class="corner-tag mr-1">┏</span>四角号码</div>
              <div class="p-6">
                <a-row :gutter="8">
                  <a-col
                    :span="4"
                    v-for="(number, numIndex) in ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']"
                    :key="numIndex"
                    class="mt-2"
                  >
                    <a-button class="text-yellow-600 border-yellow-600 transition duration-200"> {{ number }}开头 </a-button>
                  </a-col>
                </a-row>
              </div>
              <div class="pl-6 text-lg font-bold pt-4"><span class="corner-tag mr-1">┏</span>笔画查字</div>
              <div class="p-6">
                <a-row :gutter="8">
                  <a-col
                    :span="4"
                    v-for="(stroke, strokeIndex) in [
                      '1',
                      '2',
                      '3',
                      '4',
                      '5',
                      '6',
                      '7',
                      '8',
                      '9',
                      '10',
                      '11',
                      '12',
                      '13',
                      '14',
                      '15',
                      '16',
                      '17',
                      '18',
                      '19',
                    ]"
                    :key="strokeIndex"
                    class="mt-2"
                  >
                    <a-button class="w-16 text-yellow-600 border-yellow-600 transition duration-200"> {{ stroke }}画 </a-button>
                  </a-col>
                </a-row>
                <a-button type="primary" class="w-full transition duration-200 mt-2"> 显示 21-84 画 <DownOutlined /></a-button>
              </div>
            </a-card>
          </div>
        </a-col>
      </a-row>
    </div>
  </a-config-provider>
</template>

<script setup>
  const 汉字分类 = [
    {
      title: '大家都在搜的汉字',
      characters: [
        [
          ['东', 'dōng'],
          ['乘', 'chéng'],
          ['习', 'xí'],
          ['佑', 'yòu'],
          ['倍', 'bèi'],
          ['初', 'chū'],
          ['取', 'qǔ'],
          ['叠', 'dié'],
          ['吣', 'qìn'],
          ['咐', 'fù'],
          ['哇', 'wa/wā'],
          ['圩', 'xū/wéi'],
          ['坻', 'chí/dǐ'],
          ['垒', 'lěi'],
          ['堢', 'bǎo'],
          ['奏', 'zòu'],
          ['尕', 'gǎ'],
          ['弘', 'hóng'],
          ['必', 'bì'],
          ['忌', 'jì'],
          ['悄', 'qiǎo'],
          ['惶', 'huáng'],
          ['拒', 'jù'],
          ['捶', 'chuí'],
        ],
        [
          ['东', 'dōng'],
          ['乘', 'chéng'],
          ['习', 'xí'],
          ['佑', 'yòu'],
          ['倍', 'bèi'],
          ['初', 'chū'],
          ['取', 'qǔ'],
          ['叠', 'dié'],
          ['吣', 'qìn'],
          ['咐', 'fù'],
          ['哇', 'wa/wā'],
          ['圩', 'xū/wéi'],
          ['坻', 'chí/dǐ'],
          ['垒', 'lěi'],
          ['堢', 'bǎo'],
          ['奏', 'zòu'],
          ['尕', 'gǎ'],
          ['弘', 'hóng'],
          ['必', 'bì'],
          ['忌', 'jì'],
          ['悄', 'qiǎo'],
          ['惶', 'huáng'],
          ['拒', 'jù'],
          ['捶', 'chuí'],
        ],
      ],
    },
    {
      title: '网络流行汉字',
      characters: [
        [
          ['硃', 'zhū'],
          ['赟', 'yūn'],
          ['韨', 'fú'],
          ['薙', 'tì/zhì'],
          ['笏', 'hù'],
          ['贳', 'shì'],
          ['甖', 'yīng'],
          ['畊', 'gēng'],
          ['莔', 'méng'],
          ['囧', 'jiǒng'],
          ['槑', 'méi'],
          ['嬲', 'niǎo'],
          ['奀', 'ēn'],
          ['匚', 'fāng'],
          ['孬', 'nāo'],
          ['嫑', 'biáo'],
          ['犇', 'bēn'],
          ['猋', 'biāo'],
          ['骉', 'biāo'],
          ['麤', 'cū'],
          ['毳', 'cuì'],
          ['淼', 'miǎo'],
          ['掱', 'pá'],
          ['惢', 'suǒ/ruǐ'],
          ['众', 'zhòng'],
        ],
      ],
    },
    {
      title: '文言文最常用汉字',
      characters: [
        [
          ['专', 'zhuān'],
          ['伉', 'kàng'],
          ['伦', 'lún'],
          ['咊', 'hé/huò'],
          ['媵', 'yìng'],
          ['孠', 'sì'],
          ['崟', 'yín'],
          ['弩', 'nǔ'],
          ['彣', 'wén'],
          ['惨', 'cǎn'],
          ['慈', 'cí'],
          ['唐', 'táng'],
          ['拧', 'níng/nǐng/nìng'],
          ['撤', 'chè'],
          ['昝', 'zǎn'],
          ['术', 'shù/zhú'],
          ['欣', 'xīn'],
          ['欲', 'yù'],
          ['氱', 'yǎng'],
          ['浞', 'zhuó'],
          ['熛', 'biāo'],
          ['爨', 'cuàn'],
          ['盱', 'xū'],
        ],
      ],
    },
    {
      title: '笔画笔顺易出错汉字',
      characters: [
        [
          ['匕', 'bǐ'],
          ['万', 'wàn/mò'],
          ['义', 'yì'],
          ['及', 'jí'],
          ['火', 'huǒ'],
          ['讯', 'xùn'],
          ['凸', 'tū'],
          ['凹', 'āo'],
          ['出', 'chū'],
          ['贯', 'guàn'],
          ['重', 'zhòng/chóng'],
          ['脊', 'jǐ'],
          ['敝', 'bì'],
          ['爽', 'shuǎng'],
          ['登', 'dēng'],
          ['疆', 'jiāng'],
          ['车', 'chē/jū'],
          ['白', 'bái'],
          ['臣', 'chén'],
          ['兜', 'dōu'],
          ['叟', 'sǒu'],
          ['兆', 'zhào'],
          ['插', 'chā'],
          ['母', 'mǔ'],
        ],
      ],
    },
    {
      title: '学海寻奇',
      characters: [
        [
          ['亖', 'sì'],
          ['㸚', 'lǐ'],
          ['灥', 'xún/quán'],
          ['麤', 'cū'],
          ['龖', 'dá'],
          ['厵', 'yuán'],
          ['叕', 'zhuó/yǐ/lì/jué'],
          ['燚', 'yì'],
          ['茻', 'mǎng'],
          ['嚞', 'zhé'],
          ['皛', 'xiǎo/jiǒng'],
          ['舙', 'huà'],
          ['瞐', 'mò'],
          ['馫', 'xīn'],
          ['飍', 'xiū'],
          ['雥', 'zá'],
          ['灥', 'xún/quán'],
          ['飝', 'fēi'],
          ['刕', 'lí'],
          ['譶', 'tà'],
          ['靐', 'bìng'],
          ['龘', 'dá'],
          ['齉', 'nàng'],
          ['爩', 'yù'],
          ['鱻', 'xiān'],
        ],
        [
          ['亖', 'sì'],
          ['㸚', 'lǐ'],
          ['灥', 'xún/quán'],
          ['麤', 'cū'],
          ['龖', 'dá'],
          ['厵', 'yuán'],
          ['叕', 'zhuó/yǐ/lì/jué'],
          ['燚', 'yì'],
          ['茻', 'mǎng'],
          ['嚞', 'zhé'],
          ['皛', 'xiǎo/jiǒng'],
          ['舙', 'huà'],
          ['瞐', 'mò'],
          ['馫', 'xīn'],
          ['飍', 'xiū'],
          ['雥', 'zá'],
          ['灥', 'xún/quán'],
          ['飝', 'fēi'],
          ['刕', 'lí'],
          ['譶', 'tà'],
          ['靐', 'bìng'],
          ['龘', 'dá'],
          ['齉', 'nàng'],
          ['爩', 'yù'],
          ['鱻', 'xiān'],
        ],
      ],
    },
    {
      title: '趣味叠字',
      characters: [
        [
          ['从', 'cóng/zòng'],
          ['众', 'zhòng'],
          ['炏', 'yán'],
          ['幵', 'jiān'],
          ['尛', 'mó'],
          ['皕', 'bì'],
          ['林', 'lín'],
          ['森', 'sēn'],
          ['喆', 'zhé'],
          ['嚞', 'zhé'],
          ['囍', 'xǐ'],
          ['皛', 'xiǎo/jiǒng'],
          ['畾', 'léi'],
          ['磊', 'lěi'],
          ['嚞', 'zhé'],
          ['犇', 'bēn'],
          ['骉', 'biāo'],
          ['鱻', 'xiān'],
          ['羴', 'shān'],
          ['猋', 'biāo'],
          ['麤', 'cū'],
          ['赑', 'bì'],
          ['贔', 'bì'],
          ['轰', 'hōng'],
          ['毳', 'cuì'],
          ['矗', 'chù'],
          ['皛', 'xiǎo'],
          ['灥', 'xún/quán'],
          ['飍', 'xiū'],
          ['馫', 'xīn'],
          ['飝', 'fēi'],
          ['刕', 'lí'],
          ['叒', 'ruò'],
          ['叕', 'zhuó/yǐ/lì/jué'],
          ['燚', 'yì'],
          ['茻', 'mǎng'],
        ],
      ],
    },
  ];

  const 汉字大全导航 = [
    '部首查字',
    '拼音查字',
    '笔画查字',
    '多音字大全',
    '500个最常用字',
    '2500个常用字',
    '1000个次常用字',
    '现代汉语通用字',
    '通用规范汉字',
    '简繁汉字对照表',
    '笔画最多汉字',
    '规范繁体字对照表',
  ];
</script>
<style lang="scss" scoped>
  :deep() {
    .dot-class {
      padding-top: 5%;
      li {
        &.slick-active {
          button {
            background: #be9239;
          }
        }
        button {
          background: #333;
        }
      }
    }
  }

  .corner-tag {
    position: relative;
    top: -10px;
    color: red;
  }
</style>
